<template>
  <view :class="[variables.ns.b, variables.ns.s('gradient', gradient)]">
    <template v-for="item in fv.keys">
      <view :class="[item.class]" v-if="item.is">{{ text }}</view>
    </template>
  </view>
</template>

<script lang="ts" setup>
import { FontNS, variables } from '.'
import { computed } from 'vue'

defineOptions({
  name: FontNS.name
})
const props = defineProps(FontNS.props)
const fv = computed(() => {
  const keys = ['shadow', 'stroke', 'font'] as const

  return {
    keys: keys.map(item => ({
      is: item === 'font' || props[item],
      class: [variables.ns.e(item), props.icon && 'iconfont ' + props.icon]
    }))
  }
})
</script>